<template>
  <div>
    <el-form :inline="true" class="search-form" size="medium" label-width="100px">
       <el-form-item label="市场名称：" prop="marketId">
        <el-select v-model="params.marketId"
                   filterable
                   remote
                   placeholder="请选择市场">
          <el-option v-for="(item,index) in store.marketOptions" :key="item.marketId" :label="item.marketName" :value="item.marketId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item  label="市场电话：" >
        <el-input v-model="params.marketMobile" clearable placeholder="市场电话"></el-input>
      </el-form-item>
      <el-form-item  label="创建时间:" >
        <el-date-picker type="date" :picker-options="pickerOptions1" :editable='edit' v-model="params.searchStartTime" name="marketCreateTime" placeholder="选择日期"  value-format="yyyy-MM-dd">
        </el-date-picker> —
        <el-date-picker type="date" :picker-options="pickerOptions2" :editable='edit' v-model="params.searchEndTime" name="marketCreateTime" placeholder="选择日期"  value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" icon="el-icon-search" @click="searchData">查询</el-button>
        <el-button icon="el-icon-refresh" @click="clearSearch">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="marketList" border v-loading="loading">
      <el-table-column label="市场Logo" align="center" width="110">
        <template slot-scope="scope">
          <img style="cursor: pointer" :src="imgUrl+scope.row.marketLogo+'.r_90xh_60'"  onerror="javascript:this.src='static/images/default.svg'" @click="handleEdit(scope.row.marketId,1)">
        </template>
      </el-table-column>
      <el-table-column prop="marketName" label="市场名称">
        <template slot-scope="scope">
          <p style="cursor: pointer" @click="handleEdit(scope.row.marketId,1)">{{scope.row.marketName}}</p>
        </template>
      </el-table-column>
      <el-table-column prop="marketShortName" label="市场简称" ></el-table-column>
      <el-table-column prop="marketMobile" label="联系电话"  ></el-table-column>
      <el-table-column label="创建时间" align="center" width="150">
        <template slot-scope="scope">
          {{scope.row.marketCreateTime | filterDateForDay }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.row.marketId)" size="small" type="primary">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.pageIndex"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pickerOptions1:{
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        },
        pickerOptions2:{
          disabledDate: (time)=>{
            const time1 = this.params.searchStartTime.replace(/-/g,'/');
            const time2 = new Date(time1).getTime();
            return  time.getTime() > Date.now()||time.getTime() < time2;
          }
        },
        edit:false,
        loading: true,
        imgUrl:imageUrl,
        marketList:[],
        store:{
          insertMarket:true,
          marketOptions:[],
          params:{
            pageSize:10,
            pageIndex:1,
            marketId:this.$marketId,
          },
        },
        params:{
          pageSize:5,
          pageIndex:1,
          marketId:this.$marketId ,
          marketName:'',
          marketMobile:'',
          searchStartTime:'',
          searchEndTime:''
        },
        pageTotal:0
      }
    },
    created(){
        this.$store.commit('getMarketOptions',this.store);
    },
    methods:{
      searchData(){
        this.params.pageIndex = 1;
        this.getData();
      },
      getData(){
        this.loading = true;
        this.$axios.get(this.$api.getMarketList,{params: this.params})
          .then((res)=>{
            this.marketList = res.data.result;
            this.loading = false;
          });
        this.$axios.get(this.$api.getMarketNumber,{params: this.params})
          .then((res)=>{
            this.pageTotal = res.data.result.total
          })
      },
      clearSearch(){
        this.params = {
          pageSize:5,
          pageIndex:1,
          marketId:this.$marketId ,
          marketName:'',
          marketMobile:'',
          searchStartTime:'',
          searchEndTime:''
        };
        this.getData();
      },
      handleSizeChange(val) {
        this.params.pageSize = val;
        this.getData();
      },
      handleCurrentChange(val) {
        this.params.pageIndex = val;
        this.getData();
      },
      handleEdit(marketId,status) {
        if(status){
          this.$router.push("/market/marketForm/"+ marketId + '?status='+status)
        }else{
          this.$router.push("/market/marketForm/"+ marketId)
        }
      }
    },
    activated() {
      this.$store.commit('getMarketOptions',this.store);
      this.getData();
    }
  };
</script>
